<template>
	<scroll-view scroll-y class="page">
		<view class="padding-xs flex align-center bg-white shadow">
			<view class="flex-sub text-left">
				<view class="solid-bottom text-xl padding-top padding-lr" style="padding-bottom:20rpx;">
					<text class="cuIcon-titles text-red"></text>
					<text class="text-grey text-bold">{{title}}</text>
				</view>
			</view>
		</view>

		<view v-show="isCover" class="cu-card case margin-top-sm bg-white shadow">
			<view class="cu-item" >
				<view class="image" :v-show="this.cover!=null">
					<image :src="cover" mode="widthFix"></image>
				</view>
			</view>
		</view>

		<view class="article-content margin-top" style="background-color: white;">
			<rich-text :nodes="htmlNodes"></rich-text>
		</view>
		<!-- #ifdef MP-WEIXIN || MP-QQ -->
		<ad v-if="htmlNodes.length > 0" unit-id="adunit-01b7a010bf53d74e"></ad>
		<!-- #endif -->

		<view v-show="isOther" class="cu-bar bg-white solid-bottom margin-top">
			<view class="action text-bold" >相关知识</view>
		</view>
		<view v-show="isOther" class="cu-list menu">
			<view class="cu-item arrow" v-for="(item,index) in otherList" :key="index">
				<view class="content" @tap="navTo(item.id)">
					<text class="text-grey">{{item.name}}</text>
				</view>
			</view>
		</view>

	</scroll-view>
</template>

<script>
	import htmlParser from '@/common/util/html-parser'
	export default {
		data() {
			return {
				isCover: false,
				isOther: false,
				id: -1,
				contentType: "",
				title: "", //name
				cover: null, //封面图
				htmlNodes: [],
				otherList: [],
				article: '',
			}
		},
		onLoad(options) {
			this.id = options.id
			this.contentType = options.contentType
			if (this.contentType == "measure") {
				this.getMeasureContent(); //加载内容
			} else {
				this.getKnowledgeContent(); //加载内容
			}
		},
		methods: {
			getMeasureContent() {
				var that = this
				uni.showLoading({
					title: '加载中'
				});
				uni.request({
					url: this.$config.apiUrl + '/agronomicmeasureController/getMeasureContent?id=' + this.id,
					success: (res) => {
						uni.hideLoading();
						if (res.data.ok) {
							that.title = res.data.data.name //name
							if (res.data.data.cover != undefined && res.data.data.cover != null) {
								that.isCover = true
								that.cover = this.$config.imgUrl + "/" + res.data.data.cover //封面图
							}
							if (res.data.data.relatedknowldge != undefined && res.data.data.relatedknowldge.length > 0) {
								that.isOther = true
								that.otherList = res.data.data.relatedknowldge
							}
							that.htmlNodes = res.data.data.content
						} else {
							uni.showModal({
								title: '提示',
								content: res.data.message,
								showCancel: false
							});
						}
					},
					fail() {
						uni.hideLoading();
						uni.showModal({
							title: '提示',
							content: "获取文章内容数据失败",
							showCancel: false
						});
					}
				});
			},
			getKnowledgeContent() {
				var that = this
				uni.showLoading({
					title: '加载中'
				});
				uni.request({
					url: this.$config.apiUrl + '/expertknowledgeController/getKnowledgeContent?id=' + this.id,
					success: (res) => {
						uni.hideLoading();
						if (res.data.ok) {
							that.title = res.data.data.name //name
							if (res.data.data.cover != undefined && res.data.data.cover != null) {
								that.isCover = true
								that.cover = this.$config.imgUrl + "/" + res.data.data.cover //封面图
							}
							if (res.data.data.relatedknowldge != undefined && res.data.data.relatedknowldge.length > 0) {
								that.isOther = true
								that.otherList = res.data.data.relatedknowldge
							}
							that.htmlNodes = res.data.data.content
						} else {
							uni.showModal({
								title: '提示',
								content: "获取文章内容失败",
								showCancel: false
							});
						}
					},
					fail() {
						uni.hideLoading();
						uni.showModal({
							title: '提示',
							content: "获取文章内容失败",
							showCancel: false
						});
					}
				});
			},
			navTo(id) {
				uni.navigateTo({
					url: './njxx_content?contentType=' + this.contentType + '&id=' + id,
				})
			}
		}
	}
</script>

<style>
	.page {
		height: 100Vh;
		width: 100vw;
	}

	.article-meta {
		padding: 20rpx 40rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		color: gray;
	}

	.article-text,
	.article-author,
	.article-time {
		font-size: 26rpx;
		line-height: 50rpx;
		margin: 0 20rpx;
	}


	.article-content {
		padding: 30rpx 30rpx;
		overflow: hidden;
		font-size: 30rpx;
		margin-bottom: 30rpx;
	}
</style>
